<script setup lang="ts">
import {defineAsyncComponent} from "vue";

const Banner = defineAsyncComponent(() => import('./Banner.vue')); //动态引入组件(异步)
const Ui = defineAsyncComponent(() => import('./UI.vue')); //动态引入组件(异步)

</script>

<template>
  <h1>Components</h1>
  <Banner></Banner>
  <router-link to="/home">TO Page:Home</router-link> &nbsp; &nbsp;
  <router-link to="/about">TO Page:About</router-link> &nbsp; &nbsp;
  <router-link to="/authPage">TO Page:AuthPage</router-link>
  <router-view></router-view>
  <hr class="two" />
  <Ui></Ui>

</template>

<style>
.read-the-docs {
  color: #888;
}

a {
  background: #a2d9d0;
}
</style>
